<template>
  <div class="visualizing-demo2">
    <!-- 顶部 -->
    <div class="big-data-up">
      <div class="up-left">
        <SvgIcon name="ele-Timer" class="mr5" />
        <span>{{ state.time.txt }}</span>
      </div>
      <div class="up-center">
        <span>智慧农业系统平台</span>
      </div>
      <div class="up-right">
        <el-dropdown size="small">
          <span class="el-dropdown-link">
            {{ state.dropdownActive }}
            <SvgIcon name="ele-ArrowDown" class="el-icon--right" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(v, k) in state.dropdownList" :key="k">{{ v.label }} </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="ml15">
          <SvgIcon name="ele-Bell" class="mr5" />
          <span>消息</span>
        </div>
        <div class="ml15">
          <SvgIcon name="ele-User" class="mr5" />
          <span>个人</span>
        </div>
        <div class="ml15">
          <SvgIcon name="ele-SwitchButton" class="mr5" />
          <span>返回</span>
        </div>
      </div>
    </div>

    <div class="big-data-down">
      <!-- 左边 -->
      <div class="big-data-down-left">
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <div class="flex-title">天气预报</div>
            <div class="flex-content flex-content-overflow">
              <div class="sky">
                <SvgIcon name="ele-Sunny" class="sky-left" />
                <div class="sky-center">
                  <div class="mb2">
                    <span class="font">多云转晴</span>
                    <span class="font">东南风</span>
                    <span>良</span>
                  </div>
                  <div class="sky-tip">温馨提示：多云转晴，南风转北风风力3级</div>
                </div>
                <div class="sky-right">
                  <span>25</span>
                  <span class="font">°C</span>
                </div>
              </div>
              <div class="sky-dd">
                <div class="sky-dl" v-for="(v, k) in state.skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
                  <div>{{ v.v1 }}</div>
                  <div v-if="v.type === 'title'">{{ v.v2 }}</div>
                  <div v-else>
                    <SvgIcon :name="v.v2" />
                  </div>
                  <div>{{ v.v3 }}</div>
                  <div>{{ v.v4 }}</div>
                  <div class="tip">{{ v.v5 }}</div>
                  <div>{{ v.v6 }}</div>
                  <div>{{ v.v7 }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <div class="flex-title">当前设备状态</div>
            <div class="flex-content flex-content-overflow">
              <div class="d-states">
                <div class="d-states-item">
                  <SvgIcon name="ele-Odometer" class="i-bg1" />
                  <div class="d-states-flex">
                    <div class="d-states-item-label">园区设备数</div>
                    <div class="d-states-item-value">99</div>
                  </div>
                </div>
                <div class="d-states-item">
                  <SvgIcon name="ele-FirstAidKit" class="i-bg2" />
                  <div class="d-states-flex">
                    <div class="d-states-item-label">预警设备数</div>
                    <div class="d-states-item-value">10</div>
                  </div>
                </div>
                <div class="d-states-item">
                  <SvgIcon name="ele-VideoPlay" class="i-bg3" />
                  <div class="d-states-flex">
                    <div class="d-states-item-label">运行设备数</div>
                    <div class="d-states-item-value">20</div>
                  </div>
                </div>
              </div>
              <div class="d-btn">
                <div class="d-btn-item" v-for="(v, k) in state.dBtnList" :key="k" :class="{ 'd-btn-active': state.dBtnActive === k }">
                  <SvgIcon name="ele-Money" class="d-btn-item-left" />
                  <div class="d-btn-item-center">
                    <div>{{ v.v1 }}</div>
                    <div>{{ v.v2 }}|{{ v.v3 }}</div>
                  </div>
                  <div class="d-btn-item-eight">{{ v.v4 }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <div class="flex-title">近30天预警总数</div>
            <div class="flex-content" ref="rightChartData1"></div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="big-data-down-center">
        <div class="big-data-down-center-one">
          <div class="big-data-down-center-one-content" ref="rightChartData5">
            <div id="3DEarth"></div>
            <div :class="v.topLevelClass" v-for="(v, k) in state.earth3DBtnList" :key="k">
              <div class="circle" v-for="i in 4" :key="i"></div>
              <div class="text-box">
                <SvgIcon :name="v.icon" :size="22" />
                <div class="text">{{ v.label }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="big-data-down-center-two">
          <div class="flex-warp-item-box">
            <div class="flex-title">
              <span>当前设备监测</span>
              <span class="flex-title-small">单位：次</span>
            </div>
            <div class="flex-content">
              <div class="flex-content-left">
                <div class="monitor-item" v-for="(v, k) in state.chartData4List" :key="k">
                  <div class="monitor-wave" :class="{ 'monitor-active': k === state.chartData4Index }">
                    <div class="monitor-z-index">
                      <div class="monitor-item-label">{{ v.label }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-content-right" ref="rightChartData4"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="big-data-down-right">
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <div class="flex-title">
              <span>近7天产品追溯扫码统计</span>
              <span class="flex-title-small">单位：次</span>
            </div>
            <div class="flex-content" ref="rightChartData3"></div>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <div class="flex-title">当前任务统计</div>
            <div class="flex-content">
              <div class="task">
                <div class="task-item task-first-item">
                  <div class="task-item-value task-first">25</div>
                  <div class="task-item-label">待办任务</div>
                </div>
                <div class="task-item">
                  <div class="task-item-box task1">
                    <div class="task-item-value">12</div>
                    <div class="task-item-label">施肥</div>
                  </div>
                </div>
                <div class="task-item">
                  <div class="task-item-box task2">
                    <div class="task-item-value">3</div>
                    <div class="task-item-label">施药</div>
                  </div>
                </div>
                <div class="task-item">
                  <div class="task-item-box task3">
                    <div class="task-item-value">5</div>
                    <div class="task-item-label">农事</div>
                  </div>
                </div>
                <div class="task-item">
                  <div class="task-item-box task4">
                    <div class="task-item-value">3</div>
                    <div class="task-item-label">巡园</div>
                  </div>
                </div>
                <div class="task-item">
                  <div class="task-item-box task5">
                    <div class="task-item-value">2</div>
                    <div class="task-item-label">采集</div>
                  </div>
                </div>
              </div>
              <div ref="rightChartData6" class="progress"></div>
            </div>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <div class="flex-title">
              <span>近7天投入品记录</span>
              <span class="flex-title-small">单位：件</span>
            </div>
            <div class="flex-content" ref="rightChartData2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="example/visualizingLinkDemo2">
import { reactive, onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import { formatDate } from '/@/utils/formatTime'
import { NextLoading } from '/@/utils/loading'
import { dropdownList, skyList, dBtnList, earth3DBtnList, chartData4List } from './mock/demo2'

// 定义变量内容
const rightChartData1 = ref()
const rightChartData2 = ref()
const rightChartData3 = ref()
const rightChartData4 = ref()
const rightChartData5 = ref()
const rightChartData6 = ref()
const state = reactive<Demo2State>({
  time: {
    txt: '',
    fun: 0,
  },
  dropdownList,
  dropdownActive: '请选择',
  skyList,
  dBtnList,
  chartData4Index: 0,
  dBtnActive: 0,
  earth3DBtnList,
  chartData4List,
  myCharts: [],
})

// 初始化时间
const initTime = () => {
  state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ')
  state.time.fun = window.setInterval(() => {
    state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ')
  }, 1000)
}
// 近30天预警总数
const initRightChartData1 = () => {
  const myChart = echarts.init(rightChartData1.value)
  const option = {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '面积模式',
        type: 'pie',
        radius: [10, 60],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5,
        },
        data: [
          { name: '天气预警', value: 100 },
          { name: '病虫害预警', value: 50 },
          { name: '任务预警', value: 130 },
          { name: '监测设备预警', value: 62 },
        ],
        label: {
          color: '#c0d1f2',
        },
      },
    ],
  }
  myChart.setOption(option)
  state.myCharts.push(myChart)
}
// 当前设备监测
const initRightChartData4 = () => {
  const myChart = echarts.init(rightChartData4.value)
  const option = {
    grid: {
      top: 10,
      right: 10,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
        lineStyle: {
          color: 'rgba(22, 207, 208, 0.1)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: '#c0d1f2',
        textStyle: {
          fontSize: 10,
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#c0d1f2',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(22, 207, 208, 0.3)',
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: 'rgba(22, 207, 208, 0.02)',
          },
        },
        nameTextStyle: {
          color: '#16cfd0',
        },
      },
    ],
    series: [
      {
        name: '温度',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(128, 255, 165)',
            },
            {
              offset: 1,
              color: 'rgba(1, 191, 236)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [140, 232, 101, 264, 90, 70],
      },
    ],
  }
  myChart.setOption(option)
  state.myCharts.push(myChart)
}
// 近7天产品追溯扫码统计
const initRightChartData3 = () => {
  const myChart = echarts.init(rightChartData3.value)
  const option = {
    grid: {
      top: 10,
      right: 0,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
        lineStyle: {
          color: 'rgba(22, 207, 208, 0.1)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#c0d1f2',
      },
    },
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(22, 207, 208, 0.1)',
          },
        },
        axisLabel: {
          color: '#c0d1f2',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(22, 207, 208, 0.3)',
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: 'rgba(22, 207, 208, 0.02)',
          },
        },
        nameTextStyle: {
          color: '#16cfd0',
        },
      },
    ],
    series: [
      {
        name: '预购队列',
        type: 'line',
        data: [200, 85, 112, 275, 305, 415],
        itemStyle: {
          color: '#16cfd0',
        },
      },
      {
        name: '最新成交价',
        type: 'line',
        data: [50, 85, 22, 155, 170, 25],
        itemStyle: {
          color: '#febb50',
        },
      },
    ],
  }
  myChart.setOption(option)
  state.myCharts.push(myChart)
}
// 当前任务统计
const initRightChartData6 = () => {
  const myChart = echarts.init(rightChartData6.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      top: 20,
      right: 50,
      bottom: 0,
      left: 80,
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: 'value',
        show: false,
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        type: 'category',
        axisTick: {
          show: false,
        },
        inverse: true,
        data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'],
        axisLabel: {
          color: '#A7D6F4',
          fontSize: 12,
        },
      },
    ],
    series: [
      {
        name: '标准化',
        type: 'bar',
        barWidth: 10, // 柱子宽度
        label: {
          show: true,
          position: 'right', // 位置
          color: '#A7D6F4',
          fontSize: 12,
          distance: 15, // 距离
          formatter: '{c}%', // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
          barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

          color: new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 0,
                color: '#51C5FD',
              },
              {
                offset: 1,
                color: '#005BB1',
              },
            ],
            false
          ), // 渐变
        },
        data: [75, 100, 60],
      },
    ],
  }
  myChart.setOption(option)
  state.myCharts.push(myChart)
}
// 近7天投入品记录
const initRightChartData2 = () => {
  const myChart = echarts.init(rightChartData2.value)
  const option = {
    grid: {
      top: 10,
      right: 0,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
        lineStyle: {
          color: 'rgba(22, 207, 208, 0.5)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#c0d1f2',
      },
    },
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(22, 207, 208, 0.1)',
          },
        },
        axisLabel: {
          color: '#c0d1f2',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(22, 207, 208, 0.3)',
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: 'rgba(22, 207, 208, 0.02)',
          },
        },
        nameTextStyle: {
          color: '#16cfd0',
        },
      },
      {
        type: 'value',
        position: 'right',
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          formatter: '{value}%',
          textStyle: {
            color: '#16cfd0',
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: 'rgba(22, 207, 208, 0.02)',
          },
        },
        nameTextStyle: {
          color: '#16cfd0',
        },
      },
    ],
    series: [
      {
        name: '销售水量',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        showAllSymbol: true,
        symbol: 'circle',
        itemStyle: {
          color: '#058cff',
        },
        lineStyle: {
          color: '#058cff',
        },
        areaStyle: {
          color: 'rgba(5,140,255, 0.2)',
        },
        data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
      },
      {
        name: '主营业务',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#00FFE3',
              },
              {
                offset: 1,
                color: '#4693EC',
              },
            ]),
          },
        },
        data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
      },
    ],
  }
  myChart.setOption(option)
  state.myCharts.push(myChart)
}
// 3DEarth 地图
const init3DEarth = (globeRadius: any) => {
  let el = <HTMLElement>document.getElementById('3DEarth')
  el.style.height = `${rightChartData5.value.offsetHeight}px`
  const myChart = echarts.init(el)
  const option = {
    globe: {
      baseTexture: 'https://i.hd-r.cn/4d572a171eb475da0c2e731d15b63aea.jpg',
      heightTexture: 'https://i.hd-r.cn/52356e8d906c84c5e23390f829dec7a3.jpg',
      shading: 'realistic',
      light: {
        ambient: {
          intensity: 0.4,
        },
        main: {
          intensity: 0.4,
        },
      },
      viewControl: {
        autoRotate: true,
      },
      postEffect: {
        enable: true,
        bloom: {
          enable: true,
        },
      },
      globeRadius,
    },
    series: {
      type: 'lines3D',
      coordinateSystem: 'globe',
      blendMode: 'lighter',
      lineStyle: {
        width: 1,
        color: 'rgb(50, 50, 150)',
        opacity: 0.1,
      },
      data: [],
    },
  }
  // 随机模拟攻击线
  let rodamData: any = function () {
    let longitude = 105.18
    let longitude2 = Math.random() * 360 - 180
    let latitude = 37.51
    let latitude2 = Math.random() * 180 - 90
    return {
      coords: [
        [longitude2, latitude2],
        [longitude, latitude],
      ],
      value: (Math.random() * 3000).toFixed(2),
    }
  }
  for (let i = 0; i < 150; i++) {
    option.series.data = option.series.data.concat(rodamData())
  }
  myChart.setOption(option)
}
// 监听地球大小变化
const initAddEventListener3DEarth = () => {
  let w = document.body.clientWidth
  let globeRadius = 0
  if (w >= 1920) globeRadius = 100
  else if (w > 1200 && w < 1920) globeRadius = 70
  else if (w > 992 && w < 1200) globeRadius = 60
  else if (w > 768 && w < 992) globeRadius = 40
  else if (w < 768) globeRadius = 20
  init3DEarth(globeRadius)
}
// 批量设置 echarts resize
const initEchartsResize = () => {
  initAddEventListener3DEarth()
  window.addEventListener('resize', () => {
    for (let i = 0; i < state.myCharts.length; i++) {
      state.myCharts[i].resize()
    }
    initAddEventListener3DEarth()
  })
}
// 页面加载时
onMounted(async () => {
  NextLoading.done()
  initTime()
  await initRightChartData1()
  await initRightChartData4()
  await initRightChartData3()
  await initRightChartData2()
  await initRightChartData6()
  await initEchartsResize()
})
// 页面卸载时
onUnmounted(() => {
  window.clearInterval(state.time.fun)
})
</script>

<style scoped lang="scss">
.visualizing-demo2 {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url(https://i.hd-r.cn/b1040178e4a2265fe87ffbb9bda839a4.jpg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  .big-data-up {
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: #43bdf0;
    overflow: hidden;
    .up-left {
      width: 30%;
      font-style: italic;
    }
    .up-center {
      width: 40%;
      display: flex;
      justify-content: center;
      font-size: 20px;
      letter-spacing: 5px;
      background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0);
      -webkit-text-fill-color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      background-size: 200% 100%;
      animation: masked-animation 4s infinite linear;
      -webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
      position: relative;
      @keyframes masked-animation {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -100% 0;
        }
      }

      &::after {
        content: '';
        width: 50%;
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        border: 1px transparent solid;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
      }
      span {
        cursor: pointer;
      }
    }
    .up-right {
      width: 30%;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      .ml15:hover {
        cursor: pointer;
      }
      :deep(.el-dropdown) {
        font-size: 13px !important;
        color: #43bdf0;
        cursor: pointer;
      }
    }
  }
  .big-data-down {
    flex: 1;
    overflow: hidden;
    display: flex;
    .big-data-down-left,
    .big-data-down-right {
      width: 30%;
      display: flex;
      flex-direction: column;
      .flex-warp-item {
        padding: 0 7.5px 15px 15px;
        width: 100%;
        height: 33.33%;
        .flex-warp-item-box {
          width: 100%;
          height: 100%;
          background: rgba(22, 34, 58, 0.4);
          display: flex;
          flex-direction: column;
          padding: 15px;
          .flex-title {
            margin-bottom: 15px;
            color: #c0d1f2;
            display: flex;
            justify-content: space-between;
            .flex-title-small {
              font-size: 12px;
            }
          }
          .flex-content {
            flex: 1;
            font-size: 12px;
          }
          .flex-content-overflow {
            overflow: hidden;
          }
        }
      }
    }
    .big-data-down-left {
      color: #c0d1f2;
      .sky {
        display: flex;
        align-items: center;
        .sky-left {
          font-size: 30px;
        }
        .sky-center {
          flex: 1;
          overflow: hidden;
          padding: 0 10px;
          .font {
            margin-right: 15px;
            background: unset !important;
            border-radius: unset !important;
            padding: unset !important;
          }
          span {
            background: #22bc76;
            border-radius: 2px;
            padding: 0 5px;
          }
          .sky-tip {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .sky-right {
          span {
            font-size: 30px;
          }
          font {
            font-size: 20px;
          }
        }
      }
      .sky-dd {
        .sky-dl {
          display: flex;
          align-items: center;
          height: 28px;
          overflow: hidden;
          div {
            flex: 1;
            overflow: hidden;
            i {
              font-size: 14px;
            }
          }
          .tip {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &:hover {
            background: rgba(0, 0, 0, 0.05);
            cursor: default;
            border-radius: 4px;
          }
          &:first-child:hover {
            background: unset;
          }
        }
        .sky-dl-first {
          color: #43bdf0;
        }
      }
      .d-states {
        display: flex;
        .d-states-item {
          flex: 1;
          display: flex;
          align-items: center;
          overflow: hidden;
          i {
            font-size: 20px;
            height: 33px;
            width: 33px;
            line-height: 33px;
            text-align: center;
            border-radius: 100%;
            flex-shrink: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .i-bg1 {
            background: #22bc76;
          }
          .i-bg2 {
            background: #e2356d;
          }
          .i-bg3 {
            background: #43bbef;
          }
          .d-states-flex {
            overflow: hidden;
            padding: 0 10px 0;
            .d-states-item-label {
              color: #43bdf0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .d-states-item-value {
              font-size: 20px;
              text-align: center;
            }
          }
        }
      }
      .d-btn {
        margin-top: 15px;
        .d-btn-item {
          border: 1px solid #c0d1f2;
          display: flex;
          width: 100%;
          height: 35px;
          border-radius: 35px;
          align-items: center;
          padding: 0 4px;
          margin-top: 15px;
          cursor: pointer;
          transition: all ease 0.3s;
          .d-btn-item-left {
            font-size: 20px;
            border: 1px solid #c0d1f2;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 100%;
            text-align: center;
            font-size: 14px;
          }
          .d-btn-item-center {
            padding: 0 10px;
            flex: 1;
          }
          .d-btn-item-eight {
            text-align: right;
            padding-right: 10px;
          }
        }
        .d-btn-active {
          transition: all ease 0.3s;
          border: 1px solid #43bdf0;
          color: #43bdf0;
          .d-btn-item-left {
            border: 1px solid #43bdf0;
          }
        }
      }
    }
    .big-data-down-center {
      width: 40%;
      display: flex;
      flex-direction: column;
      .big-data-down-center-one {
        height: 66.67%;
        padding: 0 7.5px 15px;
        .big-data-down-center-one-content {
          height: 100%;
          position: relative;
          .fixed-top,
          .fixed-right,
          .fixed-bottom,
          .fixed-left {
            position: absolute;
            width: 100px;
            height: 100px;
            display: flex;
            cursor: pointer;
            .circle {
              position: absolute;
              border-radius: 50%;
              background: rgba(0, 0, 0, 0.01);
              z-index: 10;
            }
            .text-box {
              position: relative;
              z-index: 11;
              color: #c0d1f2;
              margin: auto;
              text-align: center;
              font-size: 12px;
              i {
                font-size: 28px;
                margin-bottom: 10px;
              }
            }
          }
          .fixed-top {
            left: 20px;
            top: 20px;
          }
          .fixed-right {
            right: 20px;
            top: 20px;
          }
          .fixed-bottom {
            right: 20px;
            bottom: 20px;
          }
          .fixed-left {
            left: 20px;
            bottom: 20px;
          }
          .circle:nth-of-type(1) {
            width: 100px;
            height: 95px;
            animation: turnAround 6s infinite linear;
            box-shadow:
              0 0 1px 0 #869fe4,
              inset 0 0 10px 0 #869fe4;
          }
          .circle:nth-of-type(2) {
            width: 95px;
            height: 100px;
            animation: turnAround 10s infinite linear;
            box-shadow:
              0 0 1px 0 #3397f2,
              inset 0 0 10px 0 #3397f2;
          }
          .circle:nth-of-type(3) {
            width: 110px;
            height: 100px;
            animation: turnAround 5s infinite linear;
            box-shadow:
              0 0 1px 0 #3eaadc,
              inset 0 0 10px 0 #3eaadc;
          }
          .circle:nth-of-type(4) {
            width: 100px;
            height: 110px;
            animation: turnAround 15s infinite linear;
            box-shadow:
              0 0 1px 0 #09f,
              inset 0 0 10px 0 #09f;
          }
          @keyframes turnAround {
            100% {
              transform: rotate(360deg);
            }
          }
        }
      }
      .big-data-down-center-two {
        padding: 0 7.5px 15px;
        height: 33.33%;
        .flex-warp-item-box {
          width: 100%;
          height: 100%;
          background: rgba(22, 34, 58, 0.4);
          display: flex;
          flex-direction: column;
          padding: 15px;
          .flex-title {
            margin-bottom: 15px;
            color: #c0d1f2;
            display: flex;
            justify-content: space-between;
            .flex-title-small {
              font-size: 12px;
            }
          }
          .flex-content {
            flex: 1;
            font-size: 12px;
            display: flex;
            height: calc(100% - 30px);
            .flex-content-left {
              display: flex;
              flex-wrap: wrap;
              width: 120px;
              height: 100%;
              .monitor-item {
                width: 50%;
                display: flex;
                align-items: center;
                .monitor-wave {
                  cursor: pointer;
                  width: 40px;
                  height: 40px;
                  position: relative;
                  background-color: #43bdf0;
                  border-radius: 50%;
                  overflow: hidden;
                  text-align: center;
                  &::before,
                  &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    width: 40px;
                    height: 40px;
                    background: #f4f4f4;
                    animation: roateOne 10s linear infinite;
                    transform: translateX(-50%);
                    z-index: 1;
                  }
                  &::before {
                    bottom: 10px;
                    border-radius: 60%;
                  }
                  &::after {
                    bottom: 8px;
                    opacity: 0.7;
                    border-radius: 37%;
                  }
                  .monitor-z-index {
                    position: relative;
                    z-index: 2;
                    color: #4eb8ff;
                    display: flex;
                    align-items: center;
                    height: 100%;
                    justify-content: center;
                    font-weight: bold;
                  }
                }
                @keyframes roateOne {
                  0% {
                    transform: translate(-50%, 0) rotateZ(0deg);
                  }
                  50% {
                    transform: translate(-50%, -2%) rotateZ(180deg);
                  }
                  100% {
                    transform: translate(-50%, 0%) rotateZ(360deg);
                  }
                }
                .monitor-active {
                  background-color: #22bc76;
                  .monitor-z-index {
                    color: #22bc76;
                  }
                }
              }
            }
            .flex-content-right {
              flex: 1;
            }
          }
        }
      }
    }
    .big-data-down-right {
      .flex-warp-item {
        padding: 0 15px 15px 7.5px;
        .flex-content {
          display: flex;
          flex-direction: column;
          .task {
            display: flex;
            height: 45px;
            .task-item {
              flex: 1;
              color: #c0d1f2;
              display: flex;
              justify-content: center;
              .task-item-box {
                position: relative;
                width: 45px;
                height: 45px;
                overflow: hidden;
                border-radius: 100%;
                z-index: 0;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
                &::before {
                  content: '';
                  position: absolute;
                  z-index: -2;
                  left: -50%;
                  top: -50%;
                  width: 200%;
                  height: 200%;
                  background-repeat: no-repeat;
                  background-size:
                    50% 50%,
                    50% 50%;
                  background-position:
                    0 0,
                    100% 0,
                    100% 100%,
                    0 100%;
                  background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
                    linear-gradient(#ffb980, #ffb980);
                  animation: rotate 2s linear infinite;
                }
                &::after {
                  content: '';
                  position: absolute;
                  z-index: -1;
                  left: 1px;
                  top: 1px;
                  width: calc(100% - 2px);
                  height: calc(100% - 2px);
                  border-radius: 100%;
                }
                .task-item-value {
                  text-align: center;
                  font-size: 14px;
                  font-weight: bold;
                }
                .task-item-label {
                  text-align: center;
                }
              }
              .task1 {
                &::after {
                  background: #5492be;
                }
              }
              .task2 {
                &::after {
                  background: #43a177;
                }
              }
              .task3 {
                &::after {
                  background: #a76077;
                }
              }
              .task4 {
                &::after {
                  background: #b4825a;
                }
              }
              .task5 {
                &::after {
                  background: #74568f;
                }
              }
            }
            .task-first-item {
              flex-direction: column;
              text-align: center;
              .task-first {
                font-size: 20px;
              }
            }
          }
        }
      }
      .progress {
        flex: 1;
      }
    }
  }
}
</style>
